<template>
  <div>
    <el-drawer v-model="drawer" :title="titlename" :with-header="true" size="450px" @close="handleDrawerClose">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="字典值内容" prop="strZiDianZhi">
            <el-input v-model="ruleForm.strZiDianZhi" type="textarea" @blur="handleBlur" />
          </el-form-item>
          <el-form-item label="拼音码" prop="strPym">
            <el-input v-model="ruleForm.strPym" />
          </el-form-item>
          <el-form-item label="备注1" prop="strBeiZhu1">
            <el-input v-model="ruleForm.strBeiZhu1" />
          </el-form-item>
          <el-form-item label="备注2" prop="strBeiZhu2">
            <el-input v-model="ruleForm.strBeiZhu2" />
          </el-form-item>
          <el-form-item label="分类" prop="strFenLei">
            <el-input v-model="ruleForm.strFenLei" />
          </el-form-item>
          <el-form-item label="是否默认字典信息" prop="name">
            <el-switch
              @change="switchdefaults"
              v-model="ruleForm.strShiFouMoRen"
              class="ml-2"
              width="60"
              inline-prompt
              active-text="默认"
              inactive-text="不默认"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef)">确定</el-button>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { pinyin } from "pinyin-pro";
const api = ref<any>(null);
const drawer = ref(false);
const titlename = ref("");
const handleDrawerClose = () => {
  console.log(111);
};

const switchdefaults = () => {
  console.log(ruleForm.strShiFouMoRen);
};

const cancel = () => {
  console.log(111);
};

const acceptParams = (params: any) => {
  ruleForm.strYiJiName = params.strYiJiName;
  ruleForm.strErJiName = params.strErJiName;
  drawer.value = params.Hideornot;
  titlename.value = params.title;
  api.value = params.api;
};

const handleBlur = () => {
  const firstChars = ruleForm.strZiDianZhi
    .split("")
    .map(char => pinyin(char, { style: pinyin.STYLE_NORMAL })[0])
    .join("")
    .replace(/[^a-zA-Z]/g, ""); // 使用正则表达式去除非字母字符

  const result = firstChars.toUpperCase(); // 转换为大写
  ruleForm.strPym = result;
};

const ruleFormRef = ref<any>();
const ruleForm = reactive<any>({
  strYiJiName: "",
  strErJiName: "",
  strZiDianZhi: "",
  strPym: "",
  strBeiZhu1: "",
  strBeiZhu2: "",
  strFenLei: "",
  strShiFouMoRen: true
});

const rules = reactive<any>({
  strZiDianZhi: [{ required: true, pattern: /^[^\s]+[\s\S]*$/, message: "不能只输入空格或者为空" }],
  strPym: [{ required: true, pattern: /^[^\s]+[\s\S]*$/, message: "不能只输入空格或者为空" }]
});

const handleSubmit = async (formEl: FormInstance | undefined) => {
  console.log();

  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (titlename.value == "新增字典") {
        api.value(ruleForm).then((res: any) => {
          console.log(res);
        });
      }
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

defineExpose({
  acceptParams
});
</script>

<style scoped></style>
